<!-- v-bind可以类样式,但是字符串拼接麻烦且容易出错
故v-bind用于class和style时，可以用：对象，数组，字符串 -->

<script src="../ExternalLibrary/js/vue.js"></script>

<!----------------------------------01.css样式不起作用版 start  ---------------------------------->
<!-- <fieldset class="css"> :这样写报错了 -->
<fieldset>
    <legend>01.css样式不起作用版</legend>
    <div class="css">
        <input type="text" v-model="yanse">
        <span style="color:yanse"></span>
    </div>

    <script>
        new Vue({
            el:".css",
            data:{
                yanse:""
            }
        })
    </script>
</fieldset>
<!----------------------------------01.css样式不起作用版 end  ---------------------------------->
        

<!----------------------------------02.css样式正确写法 start  ---------------------------------->
<fieldset>
    <legend>02.css样式正确写法版</legend>
    <div class="style"><!-- 不区分大小写 -->
        <input type="text" v-model="styleJson.color"><!-- 可以输入颜色看看 -->
        <input type="search" v-model="styleJson.color"><!-- 加上这个是为了说明v-model="styleJson.color"是有效的 -->
        <span v-bind:style="styleJson">样式在vue中的正确打开方式</span>
    </div>

    <script>
        new Vue({
            el:".style",
            data:{
                styleJson:{
                    color:"",
                    display:'block',
                    width:'300px',
                    'font-size':'40px'//横杠不被解析,所以加上引号
                }
            }
        })
    </script>
</fieldset>
<!-- 总结:样式本身像json,所以样式接受json作为参数 -->
<!----------------------------------02.css样式正确写法 end  ---------------------------------->


<!----------------------------------03.类样式正确写法 start  ---------------------------------->
<fieldset>
    <legend>01.类样式本身更像一个数组,所以class接受数组作为一个参数</legend>
    <span id="cls" :class="arr">class的正确打开方式</span>
    <script>
        new Vue({
            el:"#cls",
            data:{
                arr:['aaa','bbb','ccc']//伪代码,可以F12看一下
            }
        })
    </script>
</fieldset>
<!----------------------------------03.类样式正确写法 end  ---------------------------------->
